<template>
	<view class="memberPage">
		<!-- 背景图片 -->
		<view class="bgImg"></view>
		<text class="my">我的</text>
		<!-- 个人信息展示 -->
		<view class="personal" v-if="userInfo">
			<image :src="userInfo.avatarUrl" mode="scaleToFill" style="width: 110rpx; height: 110rpx;"></image>
			<text>{{userInfo.nickName}}</text>
		</view>
		<!-- 登录按钮 -->
		<view class="login" v-else>
			<image src="/static/image/weidenglu.png" mode="scaleToFill" style="width: 110rpx; height: 110rpx;"></image>
			<button class="btn" hover-class='none' plain="true" open-type="getUserInfo" @getuserinfo="getUserInfo">点击登录</button>
		</view>

		<!-- 详细信息列表 -->
		<view class="list">
			<view v-for="(item,index) in list" :key="item.index">
				<!-- <button plain="true" open-type="getPhoneNumber" @getphonenumber="phoneNumber">
					{{item}} <text class="iconfont icon-jiantouarrow487"></text></button> -->
				<button plain="true" @tap="open(index)">
					{{item}} <text class="iconfont icon-jiantouarrow487"></text></button>
			</view>
		</view>
	</view>
</template>

<script>
	import Vuex from "vuex";
	export default {
		data() {
			return {
				userInfo: null,
				list: ["我的订单", "我的信息"],
				// 判断用户是否登录了
				loginflag: false,
				// 获取手机号码
				phone: void 0,
			};
		},
		methods: {
			...Vuex.mapMutations(["saveUserInfo", "saveOpenid"]),
			async getUserInfo() {
				uni.login({
					provider: 'weixin',
					success: async res => {
						let result = await this.$myrequest({
							url: "sns/jscode2session",
							data: {
								appid: "wx6ce21f832fe18c70",
								secret: "09d5922babfa990a2c7b25b47581722b",
								js_code: res.code,
								grant_type: 'authorization_code'
							},
						});
						this.saveOpenid(result.data.openid);
					}
				});

				uni.getUserInfo({
					provider: 'weixin',
					success: async res => {
						this.userInfo = res.userInfo
						this.saveUserInfo(res.userInfo);
					}
				});
			},
			// 获取用户手机号
			phoneNumber(res) {
				if (!this.loginflag) {
					uni.showToast({
						title: `请点击登录`,
						icon: "none"
					})
					return;
				}
				this.phone = res;
			},
			// 打开新的页面了
			open(index) {
				if (index === 0) {
					uni.navigateTo({
						url: "../../order/order"
					});
				} else {
					if (!this.userInfo) {
						uni.showToast({
							title: `请登陆用户`,
							icon: "none",
							duration: 0.5 * 1000
						});
						return;
					};
					uni.navigateTo({
						url: "../../myMessage/myMessage",
						success: res => {
							res.eventChannel.emit('myMessage', {
								userInfo: this.userInfo
							});
						}
					});
				};
			},
		}
	}
</script>

<style lang="scss">
	.memberPage {
		background-color: #F5F8FA;
		position: relative;
	}

	.bgImg {
		width: 675rpx;
		height: 500rpx;
		border-radius: 50%;
		background-image: linear-gradient(45deg, #FC8B86, #b50e03);
		z-index: 1;
		overflow: hidden;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%) scale(3, 3);
		transform-origin: center bottom;
	}

	.my {
		position: absolute;
		z-index: 100;
		top: 90rpx;
		left: 50rpx;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 400;
	}

	.login {
		display: flex;
		align-items: center;
		position: absolute;
		z-index: 5;
		top: 207rpx;
		left: 0;
		width: 100%;
		padding-left: 30rpx;

		.btn {
			margin-left: 30rpx;
			display: inline-block;
			width: 195rpx;
			height: 70rpx;
			border-radius: 50rpx;
			@include flexCenterCenter;
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border: 2rpx solid #FFFFFF !important;
		}
	}

	.personal {
		width: 100%;
		display: flex;
		align-items: center;
		position: absolute;
		z-index: 5;
		top: 207rpx;
		left: 0;
		padding-left: 30rpx;

		image {
			width: 110rpx;
			border-radius: 50%;
		}

		>text {
			margin-left: 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}

	// 消息列表
	.list {
		width: 689rpx;
		border-radius: 16rpx;
		padding: 0rpx 40rpx;
		background-color: #FFFFFF;
		@include shuiping;
		z-index: 10;
		top: 375rpx;

		>view {
			height: 100rpx;
			line-height: 100rpx;

			button {
				@include flexBetweenCenter;
				width: 100%;
				height: 100%;
				border: none;
				background-color: none;
				font-size: 28rpx;
				font-weight: 400;
				color: #000;
				text-align: left;
				letter-spacing: 4rpx;
			}

			&:first-of-type {
				border-bottom: 2rpx solid #EAEAEB;
			}

		}
	}
</style>
